/*
 * @Description: 描述信息
 * @Version: 版本号
 * @Author: xuebao
 * @Date: 2023-12-11 16:55:16
 * @LastEditors: xuebao
 * @LastEditTime: 2023-12-15 12:25:40
 */
import Styles from './index.module.less'
import { Menu } from 'antd'
import React, { useEffect, useState } from 'react'
import { useLocation, useNavigate, useRouteLoaderData } from 'react-router-dom'
import { useStore } from '@/store'
import * as Icons from '@ant-design/icons'
//导入官网的类型
import type { MenuProps } from 'antd/es/menu'

import { Menu as IMenu } from '@/types/api'
const SlideMenu = () => {
  const [menuList, setMenuList] = useState<MenuItem[]>([])
  const data: any = useRouteLoaderData('layout')
  type MenuItem = Required<MenuProps>['items'][number]
  const [selectedKeys, setSelectedKeys] = useState<string[]>([])
  const navigate = useNavigate()
  const { collapse, isDark } = useStore((state) => ({ collapse: state.collapse, isDark: state.isDark }))
  const { pathname } = useLocation()
  //递归生成菜单
  const getTreeMenu = (menuList: IMenu.MenuItem[], treeList: MenuItem[] = []) => {
    // menuList 菜单列表
    // treeList 菜单数据
    menuList.forEach((item, index) => {
      // item.menuState == 1 正常状态下
      // item.menuType == 1 页面的条件下
      if (item.menuType == 1 && item.menuState == 1) {
        if (item.buttons) return treeList.push(getItem(item.menuName, item.path || index, createIcon(item.icon)))
        treeList.push(
          getItem(item.menuName, item.path || index, createIcon(item.icon), getTreeMenu(item.children || [])),
        )
      }
    })
    return treeList
  }

  //初始化获取菜单列表数据
  useEffect(() => {
    const treeMenuList = getTreeMenu(data.menuList)
    setMenuList(treeMenuList)
    setSelectedKeys([pathname])
  }, [])

  //生成每一个菜单项
  function getItem(
    label: React.ReactNode, //菜单名称
    key: React.Key, //路径｜唯一的值
    icon?: React.ReactNode,
    children?: MenuItem[],
  ): MenuItem {
    return {
      label,
      key,
      icon,
      children,
    } as MenuItem
  }
  const handleClickLogo = () => {
    navigate('/welcome')
  }
  //菜单点击
  const handleClickMenu = ({ key }: { key: string }) => {
    setSelectedKeys([key])
    navigate(key)
  }

  //创建icon
  function createIcon(name?: string) {
    if (!name) return <></>
    const customIcon: { [key: string]: any } = Icons
    const icon = customIcon[name]
    if (!icon) return <></>
    return React.createElement(icon)
  }

  return (
    <div className={Styles.navSide}>
      <div className={Styles.logo} onClick={handleClickLogo}>
        <img src='/imgs/logo.png' alt='' className={Styles.img} />
        {collapse ? '' : <span>雪宝货运</span>}
      </div>
      <Menu
        defaultSelectedKeys={['1']}
        defaultOpenKeys={['2']}
        mode='inline'
        theme={isDark ? 'light' : 'dark'}
        style={{
          width: collapse ? '80' : 'auto',
        }}
        // height: 'calc(100vh - 50px)',
        items={menuList}
        selectedKeys={selectedKeys}
        onClick={handleClickMenu}
      />
    </div>
  )
}

export default SlideMenu
